<!-- System logo component -->
<template>
  <div class="art-logo" @click="toWebsite">
    <img :style="logoStyle" :src="props.img ? props.img : logo" alt="logo" />
  </div>
</template>

<script setup lang="ts">
import logo from '@/assets/img/common/login_logo.png'

const toWebsite = () => {
  window.open('https://www.lutongjiakao.com/website/index')
}

const props = defineProps({
  width: {
    type: Number,
    default: 36
  },
  // width: {
  //   type: Number,
  //   default: 150
  // },
  // height: {
  //   type: String,
  //   default: 'auto'
  // },
  img: { type: String }
})

const logoStyle = computed(() => ({ width: `${props.width}px` }))
// const logoStyle = computed(() => ({ width: `${props.width}px`, height: `${props.height}px` }))
</script>

<style lang="scss" scoped>
.art-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
